<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
			.bgBlue{
				background-color: #00FF00;
			}
		
		</style>
		<script>
			function appendDIV(){
				//1  创建内存对象  div
				let elDiv = document.createElement("div");
				
				//2  修饰元素（内容、样式、事件）
				
				//设置元素的html
				elDiv.innerHTML = "<h3>动态添加内容</h3>";
				
				//修改样式
				elDiv.style.border=" solid 1px red"
				
				elDiv.className = 'bgBlue';
				
				elDiv.onclick =function(){
					alert('元素被点击 了');
				}
				
				//3 追加到目标上
				// document.getElementsByTagName("body")
				document.body.append(elDiv);
				
			}
			
			let i = 0;
			function appendLine(){
				//1  创建内存对象  div
				let elDiv = document.createElement("div");
				
				//2  修饰元素（内容、样式、事件）
				
				//设置元素的html
				elDiv.innerHTML = "动态内容"+((++i))+".....    <div style='display:inline-block;margin:10px;cursor:pointer'>X</div>";
				
				
				
				elDiv.onclick =function(){
					//移除元素自身
					console.log(this);
					this.remove();
				}
				
				//3 追加到目标上
				// document.getElementsByTagName("body")
				document.body.append(elDiv);
			}
		
		</script>
	</head>
	<body>
		<button type="button"  onclick="appendDIV()">动态追加div</button>
		<button type="button"  onclick="appendLine()">动态添加行</button>
		
	</body>
</html>
